<template>
  <div>
    <!--    红色部分-->
    <div class="MineHead">
      <p>我的</p>
      <div class="MineMsg">
        <div @click="lookBig">
          <van-image round
                     width="55px"
                     height="55px"
                     :src="avaterImg" />
        </div>

        <div class="MineMsgDetail">
          <div>
            <p v-if="$store.state.isLogin"
               class="oneLine"
               style="width: 100px"
            >{{$store.state.userInfo.userName}}
            </p>
            <p v-else class="oneLine" style="width: 80px">请登录</p>
            <p v-if="$store.state.isLogin"
               class="oneLine"
               style="width: 100px"
            >{{$store.state.userInfo.phonenumber}}
            </p>
            <van-button to="/accountsign"
                        v-else
                        style="height: 20px"
                        round
                        size="small"
                        icon="arrow"
                        icon-position="right"
                        color="#E6D48C">去登陆</van-button>
          </div>
          <van-button v-if="$store.state.isLogin"
                      color="#EC0D0D"
                      type="default"
                      icon="arrow"
                      icon-position="right"
                      to="/Personal">账号管理
          </van-button>
          <van-button v-else
                      color="#EC0D0D"
                      type="default"
                      icon="arrow"
                      icon-position="right"
                      to="/accountsign">账号管理
          </van-button>
        </div>
      </div>
      <div class="MineVip">
        <p>会员</p>
        <p>升级会员享受更多优惠</p>
        <van-button @click="popup"
                    size="mini"
                    type="default">详情</van-button>
      </div>
    </div>

    <!--    订单-->
    <div class="GoodList">
      <ul>
        <li v-for="(item,index) in goodList"
            :key="index"
            @click="jump(index)">
          <van-icon :name="item.icon" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
    <!-- 开发人员 -->
    <van-share-sheet v-model="showShare"
                     :options="options"
                     @select="selectDev" />
  </div>
</template>

<script>
import vip from '@/assets/images/vip.png'
import { Toast } from 'vant';
// import {personalInformation} from "@/api/api";
import { ImagePreview } from 'vant';
export default {
  name: "CenterHead",
  // data () {
  // components:{
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  // },
  data () {
    return {
      showShare: false,
      avaterImg: '',
      goodList: [
        {
          title: '全部订单',
          icon: 'shop-o',
        },
        {
          title: '收货地址',
          icon: 'logistics'
        },
        {
          title: '哒哒客服',
          icon: 'smile-comment-o'
        },
        {
          title: '开发人员',
          icon: 'friends-o',
        },
      ],
      valuetext: 1,
      valuePhonenumber: 1,
      uploader: 1,
      userId: 1,
      options: [
        {
          name: '开发人员A',
          icon: 'https://ts1.cn.mm.bing.net/th/id/R-C.a381a5ee3e187b75b00c2cda2781d5e8?rik=dSCWhJWkrMwH3g&riu=http%3a%2f%2fpic.616pic.com%2fys_b_img%2f00%2f03%2f62%2fz632bbpkr7.jpg&ehk=elJ2BLDlthcMyIvCGJbvdA8SKpN%2f53OS1r1E%2fUGLBgE%3d&risl=&pid=ImgRaw&r=0',
        },
        {
          name: '开发人员B',
          icon: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ayhSpcPVUo2hEwI9MfQZyAHaHa?pid=ImgDet&rs=1',
        },
        {
          name: '开发人员C',
          icon: 'https://p.qqan.com/up/2020-7/15955618057744749.jpg',
        },
        {
          name: '开发人员D',
          icon: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IryMaiYFqRPIPbgjc6KVMQAAAA?w=150&h=137&c=7&r=0&o=5&dpr=1.25&pid=1.7',
        },
        {
          name: '开发人员E',
          icon: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.rSmkQ7ElMKqPhrC76zJ4zAHaHE?pid=ImgDet&rs=1',
        },
      ],
    }
  },
  methods: {
    jump (index) {
      switch (index) {
        case 0:
          this.$store.state.isClickAllOrder = true
          this.$router.push('/mineAllOrders')
          break
        case 1:
          this.$router.push('/mineAddress')
          break
        case 2:
          this.$router.push('/robot')
          break
        case 3:
          this.showShare = true
          break
      }
    },
    selectDev (option, index) {
      console.log(index);
      this.showShare = false
      switch (index) {
        case 0:
          Toast('梁硕')
          window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=202145078';
          break
        case 1:
          Toast('张正🐏')
          window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=2522205759';
          break
        case 2:
          Toast('王冉')
          window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=2488331320';
          break
        case 3:
          Toast('史建茹')
          window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=3177745178';
          break
        case 4:
          Toast('刘奥')
          window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=627526996';
          break
      }
    },
    lookBig () {
      ImagePreview({
        images: [
          this.avaterImg
        ],
        closeable: true,
      });
    },
    popup () {
      Toast({
        message: '敬请期待',
        icon: vip,
      });
    }
  },
  created () {
    // console.log(this.$store.state.userInfo.avatar)
    this.$store.state.userInfo.avatar ? this.avaterImg = this.$store.state.userInfo.avatar : this.avaterImg = 'https://p.qqan.com/up/2021-6/16243310849654997.jpg'
  }
}
</script>

<style scoped lang="less">
.MineHead {
  overflow: hidden;
  background-color: #ec0d0d;
  border-radius: 0 0 75px 75px;

  > p {
    padding: 15px 0;
    width: 100%;
    border-bottom: 2px solid #e3c59e;
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
  }

  > .MineMsg {
    display: flex;
    justify-content: space-between;
    margin: 20px 20px;

    > .MineMsgDetail {
      flex-grow: 1;
      display: flex;
      justify-content: space-between;
      padding-left: 15px;

      > div {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        p {
          color: #fff;
          font-size: 14px;
        }
      }

      > button {
        font-size: 14px;
        height: 55px;
        line-height: 55px;
      }
    }
  }

  > .MineVip {
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
    width: 85%;
    padding: 20px 0;
    border-radius: 20px 20px;
    background-color: #000;
    box-shadow: 2px -2px 10px #828282;

    > p {
      &:first-child {
        font-size: 14px;
        color: #e3c59e;
      }

      &:nth-child(2) {
        font-size: 12px;
        color: #e3c59eaa;
      }
    }

    > button {
      width: 70px;
      height: 20px;
      border-radius: 10px;
      color: #000;
      background-color: #e3c59e;
    }
  }
}

.GoodList {
  border-bottom: 2px solid #ddd;
  box-shadow: 0px 2px 5px #ddd;
  border-radius: 0 0 10px 10px;

  > ul {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0;

    > li {
      text-align: center;

      > i {
        font-size: 35px;
        color: red;
        text-shadow: 3px 3px 5px #ddd;
      }

      > p {
        margin: 10px 0;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-overlay {
  z-index: 9999;
}
/deep/.van-share-sheet__options {
  padding-left: 0;
}
</style>